<script lang="ts" setup>
/** echarts-wordcloud@2 is for echarts@5 echarts-wordcloud@1 is for echarts@4 */
import 'echarts-wordcloud'

import { Ref, render } from 'vue'
import { merge } from 'lodash-es'
import { useECharts } from '../hooks/useECharts'
import type { WordCloudSeriesOption, EChartsOption } from 'echarts'

const props = defineProps<{
  /** 图表数据 */
  data: WordCloudSeriesOption['data']
  /** 是否展示tooltip */
  showToolTip?: boolean
  /** 是否自定义tooltip */
  isDiyToolTip?: boolean
  /** 单位 */
  unit?: string
  /** 配置项 */
  options?: EChartsOption
}>()
const slots = defineSlots<{
  tooltip(index: number, params: any): any
}>()

/** 容器 */
const chartRef = ref<HTMLDivElement | null>(null)
/** 实例方法 */
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)

watchEffect(() => {
  /** 无数据则不绘制 */
  if (!props.data?.length) return

  const maxVlaue = Math.max(...props.data.map((k) => Number(k.value)))

  /** 基本配置(在项目中使用时，修改成统一样式风格) */
  let basicOptions = {
    color: ['#0A59FF'],
    darkMode: true,
    grid: {
      top: 46,
      bottom: 20,
      left: 38,
      right: 0
      // containLabel: true
    },
    tooltip: {
      show: props.showToolTip,
      className: 'basicChartTooltip',
      formatter(params: any) {
        /** 自定义弹窗 */
        if (props.isDiyToolTip) {
          const div = document.createElement('div')
          render(slots?.tooltip(params?.[0]?.dataIndex, params)?.[0], div)
          return div
        }

        /** 默认弹窗 */
        const text = `${params.data.name}<br>
        ${params.marker}${params.data.value}${props.unit || ''}
        `
        return text
      }
    },
    series: [
      {
        type: 'wordCloud',
        shape: 'circle',
        keepAspect: false,
        left: 'center',
        top: 'center',
        width: '70%',
        height: '80%',
        right: null,
        bottom: null,
        sizeRange: [12, 37],
        rotationRange: [0, 0],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        shrinkToFit: false,
        layoutAnimation: true,

        textStyle: {
          fontFamily: 'sans-serif',
          fontWeight: 'bold',
          color: function (val: any) {
            // Random color
            const color = ['#0A59FF', '#0779FF', '#60A9FF', '#3491FF', '#60A9FF', '#3D7CFF']

            const location = val.value / maxVlaue

            if (location > 0.8) {
              return color[0]
            } else if (location > 0.64 && location <= 0.8) {
              return color[1]
            } else if (location > 0.48 && location <= 0.64) {
              return color[2]
            } else if (location > 0.32 && location <= 0.48) {
              return color[3]
            } else if (location > 0.16 && location <= 0.32) {
              return color[4]
            } else {
              return color[5]
            }

            // return 'rgb(' + [Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160)].join(',') + ')'
          }
        },
        emphasis: {
          focus: 'self',
          textStyle: {
            textShadowBlur: 2,
            textShadowColor: '#333'
          }
        },

        // Data is an array. Each array item must have name and value property.
        data: props.data
      }
    ]
  } as EChartsOption

  /** 有传入的配置，则使用一个深度递归合并的配置 */
  if (props.options) {
    const { options } = props
    basicOptions = merge(basicOptions, options)
  }

  /** 绘制 */
  setOptions(basicOptions)
})
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>

<style lang="less">
.basicChartTooltip {
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px !important;
  min-width: 90px !important;
  border: none !important;
}
</style>
